<template>
<!--底部--start-->
<div class="index-footer-all">
    <div class="index-footer aps">
        <!--左边-->
        <div class="left">
            <div class="title">联系我们</div>
            <div class="l-item qq">客服QQ: <span>{{$config('kfqq')}}</span></div>
            <div class="l-item phone">客服电话:<span>{{$config('kftel')}}</span></div>
        </div>
        <div class="right">
            <ul class="big-item">
                <li>
                    <div class="title">视频</div>
                    <a href="javascript:void(0);" target="_blank">高清</a>
                </li>
                <li>
                    <div class="title">价格</div>
                    <a href="javascript:void(0);" target="_blank">价格</a>
                </li>
                <li>
                    <div class="title">支持</div>
                    <a href="javascript:void(0);" target="_blank">帮助中心</a>
                </li>
                <li>
                    <div class="title">关于</div>
                    <a href="javascript:void(0);" target="_blank">关于我们</a>
                </li>
            </ul>
        </div>
        <div class="dis3"></div>
    </div>
    <div class="footer-bottom">
        <div class="aps">
            <div class="copyright">{{$config('copyright')}} 备案号:{{$config('icpbei')}}</div>
        </div>
    </div>
</div>
<!--底部--end-->
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {
    props: ['cates'],
    data () {
      return {
        config: {}
      }
    },
    computed: {
      ...mapGetters([
        'isLogin',
        'tokenError',
        'userinfo'
      ])
    },
    mounted: function () {
    },
    methods: {
      ...mapActions(['signOut'])
    }
  }
</script>
<style lang="scss">
.index-footer-all{
    background-color: #fff;
}
.index-footer-all .index-footer{
    padding-top: 30px;
    padding-bottom: 60px;
    background-color: #fff;
}
.index-footer-all .index-footer .left{
    float: left;
    width: 265px;
    padding-left: 10px;
    border-right: 0px solid #9ba5b4;
}
.index-footer-all .index-footer .left .title{
    color: #777;
    font-size: 18px;
    margin-bottom: 18px;
}
.index-footer-all .index-footer .left .l-item{
    font-size: 14px;
    color: #999;
    line-height: 32px;
    margin-bottom: 1px;
    text-indent: 20px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 16px;
}
.index-footer-all .index-footer .left .l-item>a{
    color: #ccc;
}
.index-footer-all .index-footer .left .l-item.qq{
    background-image: url("../../../../assets/web/footer-qq.png");
}
.index-footer-all .index-footer .left .l-item.phone{
    background-image: url("../../../../assets/web/footer-phone.png");
}
.index-footer-all .index-footer .left .l-item.time{
    background-image: url("../../../../assets/web/footer-time.png");
}
.index-footer-all .index-footer .right{
    float: right;
    margin-right: 38px;
}
.index-footer-all .index-footer .right ul.big-item{
    padding-left: 78px;
}
.index-footer-all .index-footer .right ul.big-item li{
    float: left;
    width: 180px;
}
.index-footer-all .index-footer .right ul.big-item li .title{
    color: #999;
    font-size: 14px;
    margin-bottom: 23px;
}
.index-footer-all .index-footer .right ul.big-item li a{
    display: block;
    margin-bottom: 5px;
    line-height: 1.8;
    color: #999;
    font-size: 14px;
}
.index-footer-all .index-footer .right ul.big-item li a:hover{
    color: #777;
}
.footer-bottom {background: #fff; height: 62px;line-height: 62px; border-top:solid 1px #efefef;}
.footer-bottom .copyright {color:#777; font-size:14px;}
</style>
